<template>
  <div class="father">
    <el-button type="primary" @click="excoea">导出</el-button>
    <el-upload ref="fileUploadForm" action="" :multiple="false" :auto-upload="false" :show-file-list="false"
      :file-list="state.fileList" :http-request="handleFileUploadSubmit" :on-change="handleFileListChanged">
      <el-row>
        <el-col style="display: flex; text-align: center; width: 400px">
          <el-input :value="state.currentFileName" placeholder="请选择文件" readonly />
          <el-button type="info" round style="margin-left: 20px" size="middle">选择文件</el-button>
        </el-col>
      </el-row>
    </el-upload>

    <el-row style="margin-top: 30px; margin-bottom: 30px">
      <el-col style="text-align: center">
        <el-button round @click="clearFileList">清空</el-button>
        <el-button type="success" round style="margin-left: 20px" @click="submitFile">上传</el-button>
      </el-col>
    </el-row>



  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import axios from 'axios';
const state = reactive({
  // 当前已选择的文件的文件名
  currentFileName: '',
  // 待上传的文件列表
  fileList: [],
});
const excoea = () => {
  axios({
    url: '/export/export',
    method: 'GET',
    responseType: 'blob' // 设置请求响应类型为blob
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '测试导出.xlsx'); // 设置下载的文件名
    document.body.appendChild(link);
    link.click();
  });
};

/**
      * 文件状态改变时的操作
      * @param {Object} selectedFile 选择的文件对象
      * */
const handleFileListChanged = (selectedFile) => {
  // TODO 选择了文件时可以做一些文件类型的校验之类的操作
  // 文件列表修改为选择的文件
  state.fileList = [selectedFile];
  // 提示框展示为选择的文件的文件名
  state.currentFileName = selectedFile.name;
}

/**
 * 清空待上传的文件列表
 * */
const clearFileList = () => {
  // 待上传的文件列表清空
  state.fileList = [];
  // 提示框展示的文件名清空
  state.currentFileName = '';
}
const fileUploadForm = ref();
/**
 * 点击【上传】按钮时要进行的操作
 * */
const submitFile = () => {
  // 校验无误将要上传，这里会调用 http-request 所绑定的方法
  fileUploadForm.value.submit();
}

/**
 * 发送文件上传的网络请求
 * */
const handleFileUploadSubmit = ({ file }) => {
  // 在表单中添加要发送给接口的数据
  const fileFormData = new FormData();
  // 在表单中添加要发送给接口的数据
  fileFormData.append('excelFile', file);
  console.log(fileFormData)
  // 使用 axios 发送文件上传请求，并监听文件上传进度
  axios.post('http://127.0.0.1:8080/export/upload', fileFormData,).then((res) => {
    console.log(res)
  });
}



</script>
<style scoped>
.father {
  width: 80vw;
  height: 80vh;
}
</style>
